import { useEffect, useState } from 'react'
import './index.css'

// 第一个需要传递一个函数，第二个参数需要传递一个依赖数组
// useEffect(effect: EffectCallback, deps?: DependencyList): void;

function Hi() {
  const [count, setCount] = useState(1)
  // 1. 仅在组件挂载执行
  useEffect(() => {
    console.log('Hi mounted')
  }, [])

  // 2. 仅在组件挂载和更新(任意值更新)的时候执行
  useEffect(() => {
    // console.log('Hi mounted update')
  })

  // 3. 监听某个值的更新（vue3->watch）
  useEffect(() => {
    // if (count !== 1) {
    console.log('count更新了', count)
    // }
  }, [count])

  // 4. 模拟组件卸载
  useEffect(() => {
    return () => {
      console.log('Hi unmounted')
    }
  }, [])

  const incCount = () => {
    setCount((preCount) => {
      return (preCount += 1)
    })
  }
  return (
    <>
      <div className="hi-container">
        <h2>Hi组件</h2>
        <div>
          {count}
          <button onClick={incCount}>count++</button>
        </div>
      </div>
    </>
  )
}

export default Hi
